<template>
  <view class="content">
    <view class="header">
      <view class="title">我的衣橱</view>
    </view>
    <view class="categories">
      <view class="category" v-for="(item, index) in categories" :key="index" @click="selectCategory(item)">
        <text>{{ item.name }}({{ item.count }})</text>
        <image :src="item.main_image" mode="aspectFit"></image>
      </view>
    </view>

    <!--u-button type="primary" class="add-button" shape="circle"
      icon="plus" @click="addNewItem">
    </u-button-->
  </view>
</template>

<script>
import clothes from "@/api/clothes.js";
export default {
  data() {
    return {
      categories: [],
    };
  },
  onLoad: function () {
    this.loadData();
  },
  onShow: function () {
    this.loadData();
  },
  methods: {
    loadData() {
      clothes.get_categories_info().then((res) => {
        let arr = [];
        res.forEach((item) => {
          if (item.main_image) {
            item.main_image = this.$getBaseUrl() + item.main_image;
          }
          else {
            item.main_image = '@/static/logo.png'
          }
          arr.push(item);
        });
        this.categories = arr;
      });
    },
    addNewItem() {
      // console.log('添加新项目');
      uni.navigateTo({
        url: `./editclothes`,
      });
    },
    selectCategory(category) {
      // console.log(category);
      uni.navigateTo({
        url: `./list?category_id=${category.id}`,
        // url:`./list?category=` + encodeURIComponent(JSON.stringify(category))
      });
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #f8f8f8;
  width: 100%;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: calc(100% - 20rpx);
  margin: 20rpx 0 0 0;
}

.category {
  width: 30%;
  height: 250rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 5rpx 10rpx;
  position: relative;
}

.category text {
  /* 		position: absolute;
		top: 50%;
		left: 50%; */
  transform: translate(-50%, -50%);
  color: #333;
}

.category image {
  width: 80%;
  height: 180rpx;
  object-fit: cover;
  border-radius: 6rpx;
}

.add-button {
  width: 20rpx;
  height: 60rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 50%;
  position: fixed;
  bottom: 0rpx;
  right: 30rpx;
  z-index: 999;
}
</style>
